var React = require('react');
var token = $.cookie('token');
var mytoken = JSON.parse(token);
const RoleManagement = React.createClass({
    getInitialState: function () {
        return {roles: []}
    },
    componentWillMount: function () {
        var _this = this;
        $.ajax({
            type: "GET",
            url: "/api/Employee/GetRoles",
            headers: {
                Authorization: "Bearer " + mytoken.access_token
            },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                _this.setState({roles: data})
            },
            error: function (msg) {
                alert(msg);
            }
        });

    },
    componentDidMount: function () {
        var _this = this;
        var zTreeObj;
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {
            check: {
                enable: true
            }
        };
        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
        var zNodes = [
            {
                name: "商品中心",
                open: true,
                children: [
                    {
                        id: 4,
                        name: "商品上下架"
                    }, {
                        id: 5,
                        name: "商品信息修改"
                    }
                ]
            }, {
                name: "角色中心",
                open: true,
                children: [
                    {
                        id: 9,
                        name: "角色管理"
                    }, {
                        id: 11,
                        name: "用户管理"
                    }, {
                        id: 14,
                        name: "操作日志查看"
                    }
                ]
            }, {
                name: "广告中心",
                open: true,
                children: [
                    {
                        id: 12,
                        name: "新品推荐管理"
                    }
                ]
            }, {
                name: "库存中心",
                open: true,
                children: [
                    {
                        id: 6,
                        name: "新货入库"
                    }, {
                        id: 7,
                        name: "退货入库"
                    }, {
                        id: 8,
                        name: "确认发货"
                    }
                ]
            }, {
                name: "订单中心",
                open: true,
                children: [
                    {
                        id: 1,
                        name: "退货处理"
                    }, {
                        id: 2,
                        name: "退款处理"
                    }, {
                        id: 3,
                        name: "商品发货"
                    }
                ]
            }
        ];

        $(document).ready(function () {
            zTreeObj = $
                .fn
                .zTree
                .init($("#treeDemo"), setting, zNodes);
            $('#role-submit').click(function () {
                var roleId = $('#role-id-modal').val();
                var roleName = $('#role-name').val();
                var nodes = zTreeObj.getCheckedNodes();
                var result = {
                    RoleId: "",
                    RoleName: "",
                    Permissions: []
                }
                nodes.map(function (node) {
                    if (node.children == null) {
                        var temp = {};
                        temp.Name = node.name;
                        temp.Id = node.id;
                        result
                            .Permissions
                            .push(temp)
                    }
                });
                result.RoleId = roleId;
                result.RoleName = roleName;
                $.ajax({
                    type: "Post",
                    url: "/api/Employee/ChangeRolePermission",
                    headers: {
                        Authorization: "Bearer " + mytoken.access_token
                    },
                    data: result,
                    dataType: "json",
                    success: function (data) {
                        _this.setState({roles: data});

                        $('#myModal').modal('hide');
                        notification.open({message: '操作提示', description: '操作成功', placement: 'bottomRight', type: 'success'});

                    },
                    error: function (msg) {
                        alert("出错了");
                    }
                });

            })
        });
        $('#add-role').click(function () {
            $('#role-id-modal').val(-1);
            $('#role-name').val("");
            zTreeObj.checkAllNodes(false);
        });
        $('#delete-submit').click(function () {
            var roleId = $('#delete-role-id').val();
            $.ajax({
                type: "Delete",
                url: "/api/Employee/DeleteRole",
                headers: {
                    Authorization: "Bearer " + mytoken.access_token
                },
                data: {
                    "": roleId + ""
                },
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        _this.setState({roles: data});
                    } else {
                        alert("删除失败")
                    }
                },
                error: function (msg) {
                    alert("出错了");
                }
            });
        });
    },
    getRoleId: function (roleId, roleName) {
        $('#role-id-modal').val(roleId);
        $('#role-name').val(roleName);
        var zTreeObj = $
            .fn
            .zTree
            .getZTreeObj('treeDemo');
        zTreeObj.checkAllNodes(false);
        $.ajax({
            type: "GET",
            url: "/api/Employee/getPermisson",
            headers: {
                Authorization: "Bearer " + mytoken.access_token
            },
            contentType: "application/json; charset=utf-8",
            data: {
                "roleId": roleId + ""
            },
            dataType: "json",
            success: function (data) {
                data.map(per => {
                    zTreeObj.checkNode(zTreeObj.getNodeByParam("id", per.PermissionId, null), true, true);
                });
            },
            error: function (msg) {
                alert("出错了");
            }
        });
    },
    deleteRole: function (roleId, roleName) {
        $('#delete-role-name').html(roleName);
        $('#delete-role-id').val(roleId);
    },
    getRoles: function () {
        return this
            .state
            .roles
            .map(role => {
                if (role.IsStatic == true) {
                    return (
                        <tr key={role.RoleId}>
                            <td>
                                <li
                                    className="dropdown"
                                    style={{
                                    listStyleType: 'NONE'
                                }}>
                                    <a href="#" className="dropdown-toggle" data-toggle="dropdown">
                                        操作
                                        <b className="caret"></b>
                                    </a>
                                    <ul className="dropdown-menu">
                                        <li>
                                            <a
                                                data-toggle="modal"
                                                data-target="#myModal"
                                                onClick={this
                                                .getRoleId
                                                .bind(this, role.RoleId, role.Name)}
                                                id={role.RoleId}>修改</a>
                                        </li>
                                    </ul>
                                </li>
                            </td>
                            <td>{role.Name}&nbsp;&nbsp;<span className="label label-primary">系统默认</span>
                            </td>
                            <td>{role.CreationTime}</td>
                        </tr>
                    )
                } else {
                    return (
                        <tr key={role.RoleId}>
                            <td>
                                <li
                                    className="dropdown"
                                    style={{
                                    listStyleType: 'NONE'
                                }}>
                                    <a href="#" className="dropdown-toggle" data-toggle="dropdown">
                                        操作
                                        <b className="caret"></b>
                                    </a>
                                    <ul className="dropdown-menu">
                                        <li>
                                            <a
                                                data-toggle="modal"
                                                data-target="#myModal"
                                                onClick={this
                                                .getRoleId
                                                .bind(this, role.RoleId, role.Name)}
                                                id={role.RoleId}>修改</a>
                                        </li>
                                        <li>
                                            <a
                                                data-toggle="modal"
                                                data-target="#delete-Modal"
                                                onClick={this
                                                .deleteRole
                                                .bind(this, role.RoleId, role.Name)}>删除</a>
                                        </li>
                                    </ul>
                                </li>
                            </td>
                            <td>{role.Name}</td>
                            <td>{role.CreationTime}</td>
                        </tr>
                    )

                }

            })
    },
    render() {
        return (
            <div >
                <section className="content-header">
                    <h1>
                        角色中心
                        <small>角色管理</small>
                    </h1>
                    <ol className="breadcrumb">
                        <li>
                            <a href="#">
                                <i className="fa fa-dashboard"></i>
                                Stage</a>
                        </li>
                        <li>
                            <a href="#">角色管理</a>
                        </li>
                        <li className="active">概览</li>
                    </ol>
                </section>
                <br/>
                <div className="box">
                    <div className="box-header with-border">
                        <h3 className="box-title">角色管理</h3>
                        <div className="box-tools pull-right">
                            <span className="label label-primary">角色概览</span>
                        </div>
                    </div>
                    <div className="box-body">
                        <table className="table table-striped">
                            <thead>
                                <tr>
                                    <th>操作</th>
                                    <th>角色名</th>
                                    <th>创建时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                {this.getRoles()}
                            </tbody>
                        </table>
                        <button
                            type="button"
                            className="btn btn-primary btn-lg"
                            data-toggle="modal"
                            data-target="#myModal"
                            style={{
                            marginTop: '1%',
                            marginLeft: '90%'
                        }}
                            id="add-role">添加角色</button>
                    </div>
                    <div className="box-footer">
                        <div
                            className="modal fade"
                            id="myModal"
                            tabIndex="-1"
                            role="dialog"
                            aria-labelledby="myModalLabel"
                            aria-hidden="true">
                            <div className="modal-dialog">
                                <div className="modal-content">
                                    <div className="modal-header">
                                        <button type="button" className="close" data-dismiss="modal" aria-hidden="true">×</button>
                                        <h4 className="modal-title" id="myModalLabel">修改角色</h4>
                                    </div>
                                    <div className="modal-body">
                                        <ul id="myTab" className="nav nav-tabs">
                                            <li className="active">
                                                <a href="#property" data-toggle="tab">
                                                    角色属性
                                                </a>
                                            </li>
                                            <li >
                                                <a href="#role-permission" data-toggle="tab">权限</a>
                                            </li>
                                        </ul>
                                        <div id="myTabContent" className="tab-content">
                                            <div className="tab-pane fade in active" id="property">
                                                <div className="form-group">
                                                    <label htmlFor="name">角色名称</label>
                                                    <input
                                                        type="text"
                                                        id="role-name"
                                                        className="form-control"
                                                        placeholder="请输入角色名称"/>
                                                </div>
                                            </div>
                                            <div className="tab-pane fade " id="role-permission">
                                                <input id="role-id-modal" type="hidden"/>
                                                <div>
                                                    <ul id="treeDemo" className="ztree"></ul>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    <div className="modal-footer">
                                        <button type="button" className="btn btn-default" data-dismiss="modal">关闭</button>
                                        <button type="button" className="btn btn-primary" id="role-submit">提交更改</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            className="modal fade"
                            id="delete-Modal"
                            tabIndex="-1"
                            role="dialog"
                            aria-labelledby="myModalLabel"
                            aria-hidden="true">
                            <div className="modal-dialog">
                                <div className="modal-content">
                                    <div className="modal-header">
                                        <button type="button" className="close" data-dismiss="modal" aria-hidden="true">×</button>
                                        <h4 className="modal-title" id="myModalLabel">删除角色</h4>
                                    </div>
                                    <div className="modal-body">
                                        <input id="delete-role-id" type="hidden"/>
                                        您确定要删除<h5 style={{
                display: 'inline'
            }}>
                                            <span className="label label-danger" id="delete-role-name">11</span>
                                        </h5>该角色？
                                    </div>
                                    <div className="modal-footer">
                                        <button type="button" className="btn btn-default" data-dismiss="modal">关闭</button>
                                        <button type="button" className="btn btn-primary" id="delete-submit">确认删除</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
})
module.exports = RoleManagement;